<template>
  <div class="quota-container">
    <userHeader/>
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}">   <a class="bread1">当前位置：首页  >  </a></router-link>
          <router-link :to="{path:'/comment'}">  <a class="bread2">内控评价 ></a></router-link>
          <a class="bread2">内控定量评价 </a>
      </span>
    </div>
    <div class="title" v-show="companyName !='' && duringEvaluation !=''">
      <span>评价单位: {{companyName}}</span><span class="evaluatuion-time">评价期间: {{duringEvaluation}}</span></div>
    <div class="quota-content">
      <div class="navList" style="margin-bottom:20px;">
        <el-dropdown  trigger="click" @command="setCompanySelect">
          <span class="el-dropdown-link">
            {{companySelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="padding: 0 16px;overflow-y: scroll;height: 300px">
            <el-dropdown-item v-for="item in companyList" :key="item.company_id" :command="item">{{item.company_name}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown  trigger="click" @command="setEvaluationPeriod">
          <span class="el-dropdown-link">
            {{evaluationPeriodSelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="padding: 0 16px;">
            <el-dropdown-item v-for="item in evaluationPeriodList" :command="item.evaluation_period"
                              :key="item.evaluation_period">{{item.evaluation_period}}年
            </el-dropdown-item>
            <el-dropdown-item v-if="evaluationPeriodList.length==0" command="none">暂无数据</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button  type="primary" size="small"  @click="saveEvaluationPeriod">保存</el-button>
      </div>
      <div class="quota inner-container">
        <el-form>
          <el-table
            ref="processScore"
            :data="companyQuotaList"
            stripe
            sum-text="评价总分"
            show-summary
            :summary-method="getTotal"
            style="width: 100%">
            <el-table-column
              label="编号"
              type="index"
              width="125">
            </el-table-column>
            <el-table-column
              label="评价指标"
              prop="inin_title"
              width="308">
              <template slot-scope="scope">
                <el-form-item style="margin-bottom:0;width:100%">
                  <span v-if="!scope.row.editable">{{scope.row.inin_title}}</span>
                  <el-input type="textarea" :row="1" v-model="scope.row.inin_title"
                            style="width:100%" v-else></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="计算公式"
              width="380">
              <template slot-scope="scope">
                <el-form-item style="margin-bottom:0;width:100%">
                  <span v-if="!scope.row.editable">{{scope.row.inin_formula}}</span>
                  <el-input v-else type="textarea" :row="1" v-model="scope.row.inin_formula"
                            style="width:100%"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="指标类型"
              width="120">
              <template slot-scope="scope">
                <el-form-item style="margin-bottom:0;width:100%">
                  <span v-if="!scope.row.editable">{{scope.row.inin_type==1?"正指标":"负指标"}}</span>
                  <el-select v-else v-model="scope.row.inin_type" style="margin-left:0;">
                    <el-option label="正指标" value="1"></el-option>
                    <el-option label="负指标" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="标准分值"
              prop="inin_standard_score"
              width="100">
              <template slot-scope="scope">
                <el-form-item style="margin-bottom:0;width:100%">
                  <span v-if="!scope.row.editable">{{scope.row.inin_standard_score}}</span>
                  <el-input v-else type="text" v-model="scope.row.inin_standard_score"
                            style="width:100%"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="174">
              <template slot-scope="scope">
                <p class="operation" v-if="!scope.row.editable"><span @click="editQuota(scope.$index)">编辑</span><span
                  @click="deleteQuota(scope.$index)">删除</span></p>
                <p class="operation operation-save" v-else><span @click="editQuota(scope.$index)">保存</span><span
                  @click="editQuota(scope.$index)">取消</span></p>
              </template>
            </el-table-column>
            <el-table-column>
            </el-table-column>
          </el-table>
          <!--<div class="quota-total-score" v-if="companyQuotaList.length>0">-->
            <!--<div class="quota-total-score-title">评价总分</div>-->
            <!--<div class="quota-total-score-content">{{totalScore}}</div>-->
          <!--</div>-->
        </el-form>
        <p>
          <el-button type="primary" style="width:100%;" @click="addQuota" :disabled="addQuotaDisable">添加指标<i
            class="el-icon-plus el-icon--right"></i></el-button>
        </p>
      </div>


    </div>



  </div>
</template>
<script>
  import userHeader from '@/components/header.vue'

  export default ({
    data() {
      return {
        companyName:'',
        duringEvaluation:'',
        companySelect: '评价公司',
        companySelectId: '',
        evaluationPeriodSelect: '评价期间',
        companyList: [],
        evaluationPeriodList: [],
        companyQuotaList: [],
        addQuotaDisable: false,
        totalScore: ''
      }
    },
    components: {
      userHeader,
    },
    mounted() {
      this.getCompanyList()
    },
    computed: {},
    methods: {
      //表格的合计 行 合计的方法
      getTotal(param) {
        console.log(param)
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '评价总分';
            return;
          }
          switch (column.property) {
            case "inin_standard_score":
              sums[index] = this.totalScore;
              break;
            default:
              sums[index] = "--";
              break;
          }
        });
        return sums;
      },
      //获取公司列表
      getCompanyList() {
        this.axios.get('/api/v1/system/comsection?subor=collar')
          .then((res) => {
            var companyList = [];
            if (res.data.code == 0) {
              console.log((res.data.data))
              this.companyList = this.formatSonCompany(res.data.data)
              console.log(this.companyList)
            }
          })
      },
      //将公司列表树状结构转化为数组
      formatSonCompany(data) {
        var temp = [], list = [];

        function copySonCompany(obj) {
          temp = [...temp, obj]
          if (obj.son_company.length > 0) {
            obj.son_company.forEach(element => {
              copySonCompany(element)
            })
          }
          return temp
        }

        data.forEach(el => {
          list = [...list, ...copySonCompany(el)]
        })
        return list
      },
      //选择公司
      setCompanySelect(command) {
        this.evaluationPeriodSelect = '评价期间';
        this.companyQuotaList = [];

        this.companySelect = command.company_name;
        this.companySelectId = command.company_id;


        this.getCompanyEvaluationPeriod(command.company_id).then(res => {
          console.log(res.data.data)
          if (res.data.code == 0) {
            this.evaluationPeriodList = res.data.data
          }
        })
      },
      // 选择期间
      setEvaluationPeriod(command) {
        if(command=='none'){
          return false
        }
        this.companyQuotaList = [];
        this.evaluationPeriodSelect = command;
        //获取评价的基础数据
        this.axios.get('/api/v1/flow/controlindicators?company_id='+this.companySelectId+'&evaluation_period='+this.evaluationPeriodSelect+'&flag=basic').then(res=>{
          console.log(res.data)
          this.companyName = res.data.data.company_name;
          this.duringEvaluation = res.data.data.during_evaluation
        }).then(()=>{
          //获取评价指标列表
          this.getCompanyQuota(this.companySelectId, this.evaluationPeriodSelect).then(res => {
            console.log(res.data.data)
            res.data.data.items_list.forEach(el => {
              el.editable = false
            })
            this.companyQuotaList = res.data.data.items_list;
            this.totalScore = res.data.data.total_score;
          })
        })

      },
      //获取公司的评价期间列表
      getCompanyEvaluationPeriod(company_id) {
        return this.axios.get('/api/v1/flow/controlindicators?company_id=' + company_id)
      },
      //获取公司定量评价指标
      getCompanyQuota(company_id, evaluation_period) {
        return this.axios.get('/api/v1/flow/controlindicators?company_id=' + company_id + '&evaluation_period=' + evaluation_period)
      },
      formatterType(row, column, cellValue, index) {
        return cellValue == "1" ? '正指标' : '负指标'
      },
      changeAddStatus(){
        if (this.companyQuotaList.length > 0) {
          var totalScore = 0;
          this.companyQuotaList.forEach(el => {
            totalScore += parseInt(el.inin_standard_score)
          })
          if (totalScore <= 100) {
            this.addQuotaDisable = false
          }
        }
      },
      //添加指标
      addQuota() {
        if (this.companyQuotaList.length > 0) {
          var totalScore = 0;
          this.companyQuotaList.forEach(el => {
            totalScore += parseInt(el.inin_standard_score)
          })
          if (totalScore >= 100) {
            this.$alert("标准分值总值超过100，要想添加指标，请先修改已添加指标标准分值比例", "提示")
            this.addQuotaDisable = true
          } else {
            this.companyQuotaList.push({
              company_id: this.companySelectId,
              current_time: "",
              evaluation_period: this.evaluationPeriodSelect,
              inin_formula: "",
              inin_id: "0",
              inin_standard_score: "",
              inin_title: "",
              inin_type: "1",
              numrow: "",
              editable: true
            })
          }
        }else{
          if(this.companySelectId && this.evaluationPeriodSelect){
            this.companyQuotaList.push({
              company_id: this.companySelectId,
              current_time: "",
              evaluation_period: this.evaluationPeriodSelect,
              inin_formula: "",
              inin_id: "0",
              inin_standard_score: "",
              inin_title: "",
              inin_type: "1",
              numrow: "",
              editable: true
            })
          }else{
            this.$alert('请先选择评价公司和评价期间！','提示')
          }

        }
      },
      editQuota(index) {
        this.companyQuotaList.forEach((el, ind) => {
          if (index == ind) {
            el.editable = !el.editable
          }
        })
        this.changeAddStatus()
      },
      deleteQuota(index) {
        var newCompanyQuotaList = [];
        this.companyQuotaList.forEach((el, ind) => {
          if (index != ind) {
            newCompanyQuotaList.push(el)
          }
        })
        this.companyQuotaList = newCompanyQuotaList
        this.changeAddStatus()
      },
      // 保存公司在当前期间的评价指标
      saveEvaluationPeriod() {
        // /api/v1/flow/controlindicators
        //当所有的指标为非编辑状态才能提交
        var flag = true;
        this.companyQuotaList.forEach(el=>{
          console.log(el.editable)
          if(el.editable == true){
            flag = false
          }
        })
        if(flag){
          console.log(flag)
          this.axios.post('/api/v1/flow/controlindicators',
            {
              company_id:this.companySelectId,
              evaluation_period:this.evaluationPeriodSelect,
              evaluation_index:this.companyQuotaList
            }).then(res=>{
            console.log(res.data)
            if(res.data.code == 0){
              this.$alert(res.data.message,'提示')
            }else{
              this.$alert(res.data.message,'提示')
            }
          })
        }

      }

    }


  })
</script>
<style scoped>
  /*common*/
  .inner-container {
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  /*common*/

  .quota-content {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  .quota-container {
    min-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding:10px 10px 64px;
    box-sizing: border-box;
  }

  .quota-container .el-table >>> .el-table__header .has-gutter th {
    text-align: center;
    background: #d3e9bb;
  }
  .quota-container .el-table >>> .el-table__footer-wrapper tbody td{
    background: #d3e9bb;
  }

  .quota-container .title {
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    color: #666;
  }

  .quota-container .title {
    text-align: center;
    font-size: 14px;
    color: #666;
  }

  .quota-container .evaluatuion-time {
    margin-left: 64px;
  }

  .operation span {
    margin-left: 4px;
    margin-right: 4px;
    cursor: pointer;
  }

  .operation-save span {
    color: #efbc15;
  }

  .quota-total-score {
    background: #d3e9bb;
    color: #5d9120;
    font-size: 15px;
    text-align: center;
    overflow: hidden;
  }

  .quota-total-score-title {
    width: 433px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-right: .5px solid #aac983;
    border-left: .5px solid #aac983;
    float: left;
  }

  .quota-total-score-content {
    padding-top: 12px;
    padding-bottom: 12px;
    width: 433px;
    float: left;
  }
</style>
